<template>
	<view class="flex  justify-center flex-direction-c" style="padding: 8px 15px;">
		<view class="m-mode-box">
			<view class="m-cricle" :class="[isNull && 'cuIcon-add', isScale && 'scale', !isNull && 'bg-' + type, (active && !isNull) && 'active', isNull && 'isNull']" @click="onClick">
			</view>
			<text class="m-mode-text" :class="{active: active}" v-if="!isNull">{{label}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			"is-null": {
				type: Boolean,
				default: true
			},
			type: [String, Number],
			label: String,
			active: Boolean
		},
		data() {
			return {
				isScale: false,
			};
		},
		methods: {
			onClick() {
				this.isScale = true;
				setTimeout(() => {
					this.isScale = false;
				}, 300)
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-cricle {
		display: inline-block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: relative;
		text-align: center;
		line-height: 60px;
		font-size: 13px;
		background-size: contain;
		box-shadow: 0 0 0px 3px #f1f1f1;
		&.active{
			// box-shadow: 0 0 0px 3px #0081ff;
		}
		&.cuIcon-add {
			border: 1px solid #aba7a7;

			&::before {
				font-size: 22px;
				color: #aba7a7;
			}
		}
		&.isNull{
			box-shadow:none
		}
	}

	.m-mode-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.m-mode-text {
		display: block;
		font-size: 11px;
		margin-top: 5px;
		border-radius: 20px;
		width: 100%;
		text-align: center;
	}

	.m-mode-text.active {
		background: #0081ff;
		color: #fff;
	}

	.bg-1 {
		background-image: url(../static/1.png);
	}

	.bg-2 {
		background-image: url(../static/2.png);
	}

	.bg-3 {
		background-image: url(../static/3.png);
	}

	.bg-4 {
		background-image: url(../static/4.png);
	}

	.bg-5 {
		background-image: url(../static/5.png);
	}

	.bg-6 {
		background-image: url(../static/6.png);
	}
</style>
